03. Building Your First Web Page

Building Your First Web Page

Writing and Saving Your Code

With your text editor installed, you’re now ready to open it up and start writing code. Here, you’ll be writing in HTML, and that means you’ll need to save your code as an HTML file. Note that this is an important point! In order for a browser to be able to interpret your HTML code and render it as a web page, the file name must end with the appropriate extension of .html. That’s why we use a text editor (instead of a word processor) to write code — it allows us to save files in a particular format that suits our needs.

So, let’s do that. Follow these steps to write and save HTML code:

  1. Open your text editor so that you’re looking at a blank file. (Note: Some editors give you the option of clicking through a welcome tutorial before you see this blank file.)
  2. Type the following code (exactly as shown) into the blank file:
    html well, why <b>wouldn’t</b> I learn to code?
  3. Save your code as an HTML file by navigating to the menu bar, selecting File → Save As…, and giving the file a name like my-first-code.html. Note the location on your computer where you’re saving this file. Then, hit the Save button.

Viewing the Rendered Web Page

It’s now time to view the rendered web page in a browser like Chrome, Safari, or Firefox.

There are a couple of ways you can do this:

  • You can find the HTML file on your computer and double-click on it to open it. (On Mac, you can use the Finder to reach the file location, and on Windows, you can use My Computer.) Most often, your computer will be set up to open the HTML file in your default web browser. If, however, this doesn’t happen, you can simply right-click on the file, and choose to open it in a browser by selecting, for example, Open With → Google Chrome.
  • Alternatively, you can open up a web browser and then open your HTML file directly through the browser's interface. In Chrome, for instance, this would involve navigating to the menu bar and selecting File → Open File…. You’d then select the HTML file that you saved on your computer and click Open to view the rendered web page in your browser window.

Note: If you make changes to your HTML code using your text editor, those changes will only be reflected in your browser’s rendered web page if you do two things:

  1. You must first save your changes to the HTML file (in your text editor, File → Save), and
  2. You must then refresh the web page to render the modified HTML file.